<template>
  <div class="notice-list">

    <div class="card-panel">
      <div v-for="(item,index) in dataList" :key="index" class="item">
        <div class="index">NEWS</div>
        <div class="lab">【系统通知】</div>
        <div class="title">今日下午三点更新系统，发布V1.0版本</div>
        <div style="flex:1;" />
        <div class="role">管理员</div>
        <div class="time">2022-04-15 17:25:00</div>
        <div class="opt">
          <span class="el-icon-search" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import CountTo from 'vue-count-to'

export default {
  components: {
    // CountTo
  },
  data() {
    return {
      dataList: [1, 2, 3, 4, 5, 6]
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.notice-list {
  margin-bottom: 18px;
}
.card-panel {

    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    padding: 8px 20px;
    .item{
      display: flex;
      line-height: 32px;
      font-size: 14px;
       color: #666;
      .index{
        margin-right: 50px;
        color: #5688E8;
      }
      .lab{
        margin-right: 70px;
      }
      .title{
      }
      .role{
        margin-right: 100px;
      }
      .time{
        margin-right: 50px;
      }
      .opt{
        margin-right: 40px;
         cursor: pointer;
        span{
          color: #5688E8;
        }
      }

    }
}
.el-col-lg-4-8 {
		width: 20%;
	}
@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
